<script setup>
const props = defineProps({ collapse: Boolean })
</script>

<template>
  <div class="layout-logo-container" :class="{ opened: props.collapse }">
    <transition name="layout-logo-fade">
      <router-link v-if="props.collapse" key="collapse" to="/"> logo </router-link>
      <router-link v-else key="expand" to="/"> logo </router-link>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.layout-logo-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;

  a {
    display: flex;
    justify-content: center;
  }

  .layout-logo {
    display: none;
    width: 15.5px;
    height: 15.5px;
  }

  .layout-logo-text {
    width: 80px;
    height: 15.5px;
    vertical-align: middle;
  }
}

.opened {
  .layout-logo {
    display: inline-block;
    vertical-align: middle;
  }

  .layout-logo-text {
    display: none;
  }
}
</style>
